0
350
ViewsReaccionar cambiar solo el texto del botón pulsado [En bucle]
Cuando hago clic en el botón, ejecuto una función llamada AddWait pero agrega texto de espera a todos los botones. Probé con useRef pero las cosas se complicaron. Imagen;
Hice algo similar a esto con jquery;
for (let index = 0; index <= 10; index++) { $("#app").append(`<span>Hello ${index} </span> ===><button class=click-me>button ${index} </button> <br /><br />`); } $(".click-me").on("click", function (event) { var $this = $(this); console.log($this.text()); $this.text($this.text() + "hi"); //(... rest of your JS code) }); <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Puede verificar la aplicación de reacción;
Entonces, ¿cómo puedo cambiar solo el texto del botón en el que se hizo clic?
·
Juan Pablo Isaza
2 answers
Answer question0
import { useState } from "react"; import "./styles.css"; export default function App() { const [waitText, setWaitText] = useState(); const [arr,setArr] = useState([ { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, { waitText:"" }, ]); const WaitThreeSeconds = (index) => { console.log("hi"); let temp = [...arr]; temp[index].waitText = "wait" setArr([...temp]) // setWaitText("wait"); }; return ( <div className="App"> {arr.map((x, i) => ( <div key={i}> <span>Hello {i} </span> <button onClick={()=>WaitThreeSeconds(i)}> button {i} {x.waitText} </button> <br /> <br /> </div> ))} </div> ); }Puede consultar el código de la caja de arena aquí . Espero que le sea útil :)
·
Juan Pablo Isaza
Report
0
Lo que debe hacer es guardar el div con el botón en un componente separado y luego reaccionar cambiará el texto del botón solo para ese componente en particular:
import { useState } from "react"; import "./styles.css"; const CustomBtn = props => { const { item, index } = props; console.log(item) const [waitText, setWaitText] = useState(''); const waitThreeSeconds = () => { setWaitText("wait"); setTimeout(() => setWaitText(''), 3000) }; return ( <div> <span>Hello {index} </span> <button onClick={waitThreeSeconds}> button {index} {waitText} </button> <br /> <br /> </div> ) } export default function App() { return ( <div className="App"> {[...Array(10)].map((item, index) => ( <CustomBtn item={item} key={index} index={index} /> ))} </div> ); }
·
Juan Pablo Isaza
Report
Answer question